<template>
  <div class="yong-config"
    style="--van-nav-bar-background:rgb(0,0,0);--nav-bar-text-color:#ffffff;--van-nav-bar-title-text-color:#ffffff;--van-nav-bar-icon-color:#ffffff;">
    <!-- 顶部安全区和导航栏 -->
    <van-nav-bar v-if="isApp" ref="safeAreaInsetTopRef" safe-area-inset-top />
    <van-nav-bar ref="TitleNavbarRef" title="佣金设置">
      <template #left>
        <van-icon name="arrow-left" size="24" @click="pageBack" />
      </template>
    </van-nav-bar>
    <!-- 顶部安全区和导航栏 -->

    <div class="yong-content">
      <van-cell-group style="flex-shrink: 0;border-radius: 7px;overflow: hidden;">
        <van-field v-model="state.shopInfo.shopName" name="shopName" label="代理商" placeholder="代理商" input-align="right">
        </van-field>
      </van-cell-group>
      <van-cell-group style="flex-shrink: 0;margin-top: 15px;border-radius: 7px;overflow: hidden;">
        <van-field v-model="state.incomeDiscount" name="incomeDiscount" type="number" label="默认留存比" placeholder="请输入默认留存比"
          input-align="right" error-message-align="right" :rules="[{ required: true, message: '请输入默认留存比' }]">
          <template #right-icon>
            <span>‰</span>
          </template>
          <template #button>
            <div class="handle-btn" @click="defConfigHandle">设置</div>
          </template>
        </van-field>
      </van-cell-group>

      <div class="goods-list">
        <div class="goods-item" v-for="item in state.goodsList" :key="item">
          <div class="goods-name">
            <span>{{ item.goodsName }}</span>
            <span class="status" :class="`status${item.shelveStatus}`">{{ statusForm[item.shelveStatus] }}</span>
          </div>
          <div class="goods-bili">
            <div class="goods-info-all">
              <div class="goods-info">
                <div>总佣金</div>
                <div>{{ item.incomeGetAll || 0 }}元</div>
              </div>
              <div class="goods-info">
                <div>留存佣金</div>
                <div><span v-show="item.incomeSelf">≈</span> {{ item.incomeSelf || 0 }}元</div>
              </div>
              <div class="goods-info">
                <div>下级分佣</div>
                <div><span v-show="item.incomeChild">≈</span> {{ item.incomeChild || 0 }}元</div>
              </div>
            </div>
            <div class="input-item">
              <van-field v-model="item.incomeDiscount" name="incomeDiscount" type="number" label="留存比(千分位)" placeholder="请输入商品留存比"
                input-align="right" error-message-align="right" :rules="[{ required: true, message: '请输入商品留存比' }]">
                <template #right-icon>
                  <span>‰</span>
                </template>
              </van-field>
            </div>
            <div class="handle-btn2" @click="goodsConfig(item)">
              确认
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
  
  <script setup>
import { showToast } from "vant";
import { onMounted, reactive, ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useStore } from "vuex";
import api from './api'

const store = useStore()
const route = useRoute()
const router = useRouter()
const isApp = store.state.isApp

const statusForm = {
  '1': '已上架',
  '0': '已下架'
}

const state = reactive({
  shopInfo: {},
  incomeDiscount: null,
  goodsList: []
})

onMounted(() => {
  store.commit("setNavBar", { show: false })
  const { shopId, shopName } = route.query
  state.shopInfo = {
    shopId,
    shopName,
  }
  getDefConfig()
  getGoodsConfig()
})

const pageBack = () => {
  router.go(-1)
}

function getDefConfig() {
  const obj = {
    childShopId: state.shopInfo?.shopId
  }
  api.childDefaultGet(obj).then(res => {
    if (res.code != '200') {
      showToast(res.msg)
      return
    }
    state.incomeDiscount = res.data.incomeDiscount
  }).catch(err => {
    console.log(err)
  })
}

function getGoodsConfig() {
  const obj = {
    childShopId: state.shopInfo?.shopId
  }
  api.childGoodsGet(obj).then(res => {
    if (res.code != '200') {
      showToast(res.msg)
      return
    }
    state.goodsList = res.data?.list || []
  }).catch(err => {
    console.log(err)
  })
}

const defConfigHandle = () => {
  const { incomeDiscount } = state
  if (incomeDiscount !== 0 && !incomeDiscount) {
    showToast('请输入默认留存比')
    return
  }
  api.childDefaultSet({ childShopId: state.shopInfo?.shopId, incomeDiscount }).then(res => {
    showToast(res.msg)
  }).catch(err => {
    console.log(err)
  })
}

const goodsConfig = (data) => {
  const { goodsId, incomeDiscount } = data
  if (incomeDiscount !== 0 && !incomeDiscount) {
    showToast('请输入商品留存比')
    return
  }
  api.childGoodsSet({
    childShopId: state.shopInfo?.shopId,
    goodsId,
    incomeDiscount,
  }).then(res => {
    showToast(res.msg)
    if (res.code == '200') {
      getGoodsConfig()
    }
  }).catch(err => {
    console.log(err)
  })
}

  </script>
  
  <style lang="scss" scoped>
.yong-config {
  height: 100%;
  padding-top: 0 !important;
  display: flex;
  flex-flow: column;
  overflow: hidden;
  .yong-content {
    flex-grow: 1;
    overflow: hidden;
    overflow-y: auto;
    box-sizing: border-box;
    padding: 15px;
    display: flex;
    flex-flow: column;
    .goods-list {
      flex-grow: 1;
      overflow: hidden;
      overflow-y: auto;
      margin-top: 15px;
      .goods-item {
        border-radius: 7px;
        overflow: hidden;
        background: #ffffff;
        box-sizing: border-box;
        &:not(:first-of-type) {
          margin-top: 15px;
        }
        .goods-name {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 14px;
          background: #457ef2;
          color: #ffffff;
          box-sizing: border-box;
          padding: 10px;
        }
        .goods-bili {
          box-sizing: border-box;
          padding: 15px;
          .input-item {
            --van-cell-background: #f3f3f3;
            margin-top: 15px;
          }
          .goods-info-all {
            display: flex;
            justify-content: space-around;
            .goods-info {
              text-align: center;
              > div:first-of-type {
                color: #707070;
                font-size: 12px;
              }
              > div:last-of-type {
                font-size: 14px;
                margin-top: 5px;
              }
            }
          }
        }
      }
    }
  }
}

.handle-btn {
  color: #ffffff;
  background: #265efe;
  font-size: 12px;
  box-sizing: border-box;
  padding: 2px 15px;
  border-radius: 20px;
  text-align: center;
}
.handle-btn2 {
  width: 50%;
  margin-left: 25%;
  color: #ffffff;
  background: #265efe;
  font-size: 12px;
  box-sizing: border-box;
  padding: 8px 0;
  border-radius: 20px;
  text-align: center;
  margin-top: 15px;
}
.status {
  font-size: 12px;
}
.status0 {
  color: red;
}
.status1 {
  color: #08d36a;
}
</style>